<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
</head>
<body>
<div id="app">
    <p>
        {{messge}}
    </p>
    <npc>
        <button slot="center">替换中间</button>
    </npc>
    <npc>
        <button slot="left">替换左边</button>
    </npc>
    <npc>
        <button slot="right">替换右边</button>
    </npc>
    <npc>2</npc>
</div>
<template id="cpn">
    <div>
        <slot name="left">左边</slot>
        <slot name="center">中间</slot>
        <slot name="right">右边</slot>
        <slot>没name值</slot>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
  let npc = {
    template: '#cpn'
  }
  const app = new Vue({
    el: '#app',
    data: {
      messge: '这是信息'
    },
    components: {
      npc
    }
  })
</script>
</body>
</html>